<template>
  <div class="card">
    <div class="card-header">
      <div class="title">
        <i class="icon font_family icon-xinwen_o"></i><span>新闻资讯</span>
      </div>
      <div class="point">
        <i class="icon font_family icon-sandian"></i>
      </div>
    </div>
    <!------- end of card-header --------->
    <div class="nav">
      <div 
          class="item" 
          :class="{ active: active === index}" 
          v-for="(item, index) in newsCates" :key="index"
          @click="saveIndex(index)"
          >
        <div class="nav-link">{{ item.name }}</div>
      </div> 
    </div>
    <div>
      <swiper ref="list">
        <swiper-slide v-for="(item, index) in newsCates" :key="index">
          <div class="item" v-for="(list, index) in item.newsList" :key="index">
            <router-link tag="div" :to="`/articles/${list._id}`" class="list">
              <span class="name">[{{ list.categoryName }}]</span>  
              <span class="title">{{ list.title }}</span>  
              <span class="date">{{ list.createdAt | date }}</span>
            </router-link>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  import dayjs from 'dayjs'

  export default {
    name: 'NewsCard',
    filters: {
      date(val) {
        return dayjs(val).format('YYYY/MM/DD')
      }
    },
    data() {
      return {
        active: 0,
        newsCates: []
      }
    },
    computed: {
      swiper() {
        return this.$refs.list.swiper
      }
    },
    methods: {
      // 获取文章列表
      async getNewsCates() {
        const res = await this.$http.get('/news/list');
        // console.log(res);
        this.newsCates = res.data
      },

      // 点击列表
      saveIndex(index) {
        this.active = index
        // this.swiper.slideTo(index, 500, false);
      },
    },
    created() {
      this.getNewsCates();
    }
  }
</script>

<style lang="scss" scoped>
  // --------- card --------
  .card {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    .card-header {
      height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #999;
      .title {
        display: flex;
        flex: 1;
        align-items: center;
        .icon {
          font-size: 22px;
          margin-right: 2px;
        }
        span {
          font-size: 18px;
        }
      }
    }
    .active {
      color: #409eff;
      padding-bottom: 3px;
      border-bottom: 2px solid #409eff;
    }
    .nav {
      display: flex;
      justify-content: space-between;
      padding: 7px 0;
    }
    .list {
      line-height: 2rem;
      display: flex;
      .name {
        font-size: 14px;
        color: #999;
      }
      .title {
        flex: 1;
        font-size: 16px;
        padding-left: 10px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .date {
        color: #999;
        font-size: 14px;
      }
    }
  }
</style>